<%--
  Created by IntelliJ IDEA.
  User: Lt
  Date: 2018/5/17
  Time: 22:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="mobile" value="${pageContext.request.getParameter('mobile')}"></c:set>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>会员 - 服务</title>

    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/iview@2.12.0/dist/styles/iview.css"> -->

    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src=${contextPath}/static/layer/layer.js></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/iview@2.12.0/dist/iview.min.js"></script>

<style type="text/css">
    *{
        font-weight:normal;
    }
    body {
        background-color: #0A255D;
        color: #ffffff;

    }
    .dv{
        /*width: 100%;*/
        height: 1000%;
        overflow-x:scroll
    }
    .top1{
        left: 21px;
        top: 37px;
        position: absolute;

        width: 456px;
        height: 458px;
        background-image: url("${contextPath}/static/image/member/top1.png");
        background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    }

    .top2{
         left: 490px;
         top: 38px;
         position: absolute;
        width: 456px;
        height: 458px;
         <%--background-image: url("${contextPath}/static/image/member/top2.png");--%>
         <%--background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;--%>
     }

    .imgcont{
        left: 0px;
        top: 0px;
        position: absolute;
        width: 456px;
        height: 458px;
        background-image: url("${contextPath}/static/image/member/top2.png");
        background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    }

    /*.zc-map{*/
        /*width: 400px;*/
        /*height: 400px;*/
    /*}*/

    .top3{
        left: 959px;
        top: 37px;
        position: absolute;

        width: 456px;
        height: 458px;
        background-image: url("${contextPath}/static/image/member/top3.png");
        background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    }

    .mem{
        left: 21px;
        top: 507px;
        position: absolute;

        width: 1391px;
        height: 450px;
        background-image: url("${contextPath}/static/image/member/mem.png");
        background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    }

    .headk{
        left: 31px;
        top: 75px;
        position: absolute;
        background-image: url("${contextPath}/static/image/member/headk.png");
        background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    }
    .xian{
        float: left;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
        height: 1px;
        background-image: url("${contextPath}/static/image/member/xian.png");
        background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    }

    .info{
        left: 274px;
        top: 103px;
        width: 160px;
        height: 239px;
        position: absolute;
    }
    .conut{
        left: 45px;
        top: 12px;
        /*width: 160px;*/
        /*height: 239px;*/
        position: absolute;
        font-size: 13px;
    }
    .head{
        width: 212px;
        height: 340px;
    }

    .top2conut{
        left: 201px;
        top: 12px;
        /*width: 160px;*/
        /*height: 239px;*/
        position: absolute;
        font-size: 13px;
    }
    .top3conut{
        left: 345px;
        top: 12px;
        /*width: 160px;*/
        /*height: 239px;*/
        position: absolute;
        font-size: 13px;
    }
    .memtext{
        left: 657px;
        top: 6px;
        /*width: 160px;*/
        /*height: 239px;*/
        position: absolute;
        font-size: 13px;
    }

    .memCont{
        left: 35px;
        top: 45px;
        width: 1323px;
        height: 236px;
        position: absolute;
        font-size: 12px;
        /*background-color: #9fcdff;*/
    }

    .prodListNum{
        left: 38px;
        top: 60px;
        width: 376px;
        height: 358px;
        position: absolute;
        font-size: 12px;
        /*background-color: #9fcdff;*/
    }
    table{
        font-size: 12px;
        text-align: center;
        width: 100%;
    }
</style>
</head>
<body>
    <div class="dv">
        <div class="top2">
            <div class="zc-map" id="zc-map"></div>
            <div class="imgcont">
                <div class="top2conut">常去门店</div>
            </div>
        </div>
        <div id="app">
            <div class="top1">
                <div class="conut">客户信息</div>
                <div class="headk">
                    <img class="head" src="${contextPath}/static/image/member/head.png"/>
                </div>
                <div class="info" v-for="user in userList">
                    <p  v-if="user.userName === ''">姓名：{{user.userName}}</p>
                    <p  v-v-else>姓名：{{user.mobile}}</p>
                    <p style="margin-top: 15px;" v-if="user.gender === '1'">性别：女</p>
                    <p style="margin-top: 15px;" v-else>性别：男</p>
                    <p style="margin-top: 15px;">年龄：{{user.age}}</p>
                    <p style="margin-top: 15px;">手机：{{user.mobile}}</p>
                    <p style="margin-top: 15px;">当前积分：{{user.integral}}</p>
                    <p style="margin-top: 15px;">历史积分：{{user.totalPoint}}</p>
                    <p style="margin-top: 15px;" v-if="user.state === 1">状态：有效</p>
                    <p style="margin-top: 15px;" v-v-else>状态：无效</p>
                </div>
            </div>

            <div class="top3">
                <div class="top3conut">常购商品列表</div>
                <div class="prodListNum">
                    <p style="width: 100%;">
                        <div style="float: left">商品名称</div>
                        <div style="float: right">购买数量（包）</div>
                        <div class="xian"></div>
                    </p>
                    <div  v-for="(prod, index) in prodList">
                    <p>
                        <div style="float: left">{{index + 1}}、{{prod.productName}}</div>
                        <div style="float: right">{{prod.totalQuantity}}</div>
                        <div class="xian"></div>
                    </p>
                    </div>
                </div>
            </div>
            <div class="mem">
                <div class="memtext">最近消费记录</div>
                <div class="memCont">
                    <table class="table">
                        <thead>
                        <tr style="text-align: center">
                            <th style="text-align: center">商品名称</th>
                            <th style="text-align: center">商品数量</th>
                            <th style="text-align: center">收银员</th>
                            <th style="text-align: center">消费金额</th>
                            <th style="text-align: center">下单时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <%--<div class="xian"></div>--%>
                        <tr v-for="obj in consumeRecord">
                            <td>{{obj.productName}}</td>
                            <td>{{obj.quantity}}</td>
                            <td>{{obj.userName}}</td>
                            <td>{{obj.totalAmt}}</td>
                            <td>{{obj.operatorTime}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ec3688cc2547017ad39dd55153d18b85"></script>
    <script>

        var mobile = '${mobile}';

        // 高度设置
        $('#zc-map').height($('#zc-map').width()*1);
        {
            var total = $(document).height();
            $('.table-responsive').height(total*0.4);
        }


        //初始化地图
        var map = new AMap.Map('zc-map',{
            resizeEnable: true,
            zoom: 13,
            mapStyle: 'amap://styles/grey',
            center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
        });

        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
            toolBar = new AMap.ToolBar();  //工具条
            scale = new AMap.Scale();    //比例尺
            map.addControl(toolBar);
            map.addControl(scale);
        });
        var infoWindow = new AMap.InfoWindow();

        var app = new Vue({
            el: '#app',
            data: {
                markerList : [],
                userMap: {},
                userList: [],
                prodList: [],
                consumeRecord: []
            },
            mounted: function () {
                console.log(1234567)
                this.getMemberInfo();
                this.getTopShopListLocation();
                this.getTopBuyProd();
                this.getConsumeRecord();
            },
            methods: {
                //会员信息
                getMemberInfo: function () {
                    var vm = this;
                    var param = {mobile: mobile};
                    console.log(param);
                    $.ajax({
                        url: '${contextPath}/ktMember/getMemberInfo?mobile='+ mobile ,
                        type: 'POST',
                        data: param,
                        async: false,
                        cache: false,
                        dataType: 'json',   //返回值类型
                        contentType: false,
                        processData: false,
                        success : function(data) {
                            console.log(data);
                            var arrayData = data;
                            vm.userList = arrayData
                        },
                        error : function(result) {
                            // alert("表单提交错误")
                            console.info("表单提交错误："+ result);
                        }
                    });
                },
                //常去店铺
                getTopShopListLocation: function () {
                    var vm = this;
                    var param = {mobile: mobile};
                    console.log(param);
                    $.ajax({
                        url: '${contextPath}/ktMember/getTopShopListLocation?mobile='+ mobile ,
                        type: 'POST',
                        data: param,
                        async: false,
                        cache: false,
                        dataType: 'json',   //返回值类型
                        contentType: false,
                        processData: false,
                        success : function(data) {
                            console.log(data);
                            var dataArray = data;
                            if (!dataArray || dataArray.length ==0 || dataArray.code == '500') {
                                return;
                            }

                            console.log(dataArray[0]);
                            console.log(dataArray[0].longitude);

                            // map.remove(this.markerList);
                            // map.clearInfoWindow();
                            // this.markerList = [];

                            if (!dataArray || dataArray.length ==0) {
                                return;
                            }

                            map.setCenter(new AMap.LngLat(dataArray[0].longitude,dataArray[0].latitude));
                            var markerList=[];
                            for (var index = 0; index < dataArray.length; index++) {
                                var markeInfo = dataArray[index];
                                console.log("markeInfo: "+markeInfo);
                                <%--var image = '${contextPath}/static/image/marker.png';//24px*24px--%>
                                <%--if (markeInfo.isExp == '1') {--%>
                                    <%--image = '${contextPath}/static/image/exp.png';--%>
                                <%--}--%>
                                var icon = new AMap.Icon({
                                    // image : image,//24px*24px
                                    //icon可缺省，缺省时为默认的蓝色水滴图标，
                                    size : new AMap.Size(50,38)
                                });
                                var marker = new AMap.Marker({
                                    icon : icon,//24px*24px
                                    position : [markeInfo.longitude,markeInfo.latitude],
                                    title:markeInfo.shopId,
                                    offset : new AMap.Pixel(-12,-12),
                                    //animation:'AMAP_ANIMATION_BOUNCE',
                                    map : map
                                });
                                marker.content =
                                    // '<br>客户号：'+ markeInfo.CUST_CODE +
                                    '<br>店铺名称：'+ markeInfo.shopName+
                                    '<br>店铺Id：'+ markeInfo.shopId +
                                    '<br>是否试点：'+ (markeInfo.isExp == '1' ? '是':'否') +
                                    '<br>店铺地址：'+ markeInfo.address
                                ;
                                AMap.event.addListener(marker, 'click', function(e) {
                                    infoWindow.setContent(e.target.content);
                                    infoWindow.open(map, e.target.getPosition());
                                });
                                markerList.push(marker);

                            }

                            this.markerList = markerList;
                        },
                        error : function(result) {
                            console.info("表单提交错误："+ result);
                        }
                    });
                },
                //获取常购商品
                getTopBuyProd: function () {
                    var vm = this;
                    var param = {mobile: mobile};
                    console.log(param);
                    $.ajax({
                        url: '${contextPath}/ktMember/getTopBuyProd?mobile='+ mobile,
                        type: 'POST',
                        data: param,
                        async: false,
                        cache: false,
                        dataType: 'json',   //返回值类型
                        contentType: false,
                        processData: false,
                        success : function(data) {
                            console.log(data);
                            var arrayData = data;
                            vm.prodList = arrayData
                        },
                        error : function(result) {
                            console.info("表单提交错误："+ result);
                        }
                    });
                },
                getConsumeRecord: function () {
                    var vm = this;
                    var param = {mobile: mobile};
                    console.log(param);
                    $.ajax({
                        url: '${contextPath}/ktMember/getConsumeRecord?mobile='+ mobile,
                        type: 'POST',
                        data: param,
                        async: false,
                        cache: false,
                        dataType: 'json',   //返回值类型
                        contentType: false,
                        processData: false,
                        success : function(data) {
                            console.log(data);
                            var arrayData = data;
                            vm.consumeRecord = arrayData
                        },
                        error : function(result) {
                            console.info("表单提交错误："+ result);
                        }
                    });
                },
            }

        });
    </script>
</body>
</html>